<template>
  <div>
    <div class="container">
      <Header />
      <NavBar />
      <div class="goods_tilte" :class="{ is_fixed: isFixed }">
        <div class="goods_left">
          <div class="text_lf">
            <h2>{{ goodsName }}</h2>
          </div>
          <div class="text_lf">
            <a href="">{{ goodsDesc }}</a>
          </div>
          <!-- <span></span>
          <span></span>
          <span></span> -->
        </div>
        <div class="goods_right">
          <div class="text_rg"><a href="">概念页</a></div>
          <div class="text_rg"><a href="">参数页</a></div>
          <div class="text_rg"><a href="">F码通道</a></div>
          <div class="text_rg"><a href="">咨询客服</a></div>
          <div class="text_rg"><a href="">用户评价</a></div>
          <button @click="BuyClick(goodsId)">立即购买</button>
        </div>
      </div>
      <div id="boxFixed"></div>
      <div class="goods_detail">
        <div class="goods_img" v-html="goodsBg"></div>
      </div>

      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import NavBar from "../components/NavBar.vue";
import Footer from "../components/Footer.vue";
import { getGoods } from "@/assets/js/request.js";
export default {
  data() {
    return {
      detail: [],
      goodsId: "",
      goodsName: "",
      goodsBg: "",
      goodsDesc: "",
      isFixed: false,
      offsetTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
    });
  },

  components: {
    Header,
    NavBar,
    Footer,
  },
  async created() {
    this.goodsId = this.$route.params.id;
    // console.log(this.$route);
    let goodslist = await getGoods();
    this.detail = goodslist.rows;
    // console.log(this.detail);
    this.detail.forEach((item) => {
      if (this.goodsId == item.id) {
        this.goodsId = item.id;
        this.goodsName = item.name;
        this.goodsBg = item.rich_text;
        this.goodsDesc = item.desc;
      }
    });
  },
  methods: {
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    },
    BuyClick(id) {
      this.$router.push(`/buy/${id}`);
    },
  },

  destroyed() {
    //回调中移除监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/base.scss";
@import "@/assets/scss/reset.scss";
.goods_tilte {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 5px 5px rgb(0 0 0/7%);

  width: 100%;
  height: 50px;

  position: relative;
  margin: 0 auto;
  .goods_left {
    float: left;
    height: 50px;
    position: absolute;
    left: 15%;
    .text_lf {
      margin: 0 auto;
      display: inline-block;
      margin: 10px;
      a {
        color: black;
      }
    }
  }
  .goods_right {
    float: right;
    height: 50px;
    position: absolute;
    right: 10%;
    .text_rg {
      margin: 0 auto;
      display: inline-block;
      margin-top: 15px;
      border-right: 2px solid #ccc;
      padding: 0 10px;

      a {
        color: #666;
      }
    }
    button {
      display: inline-block;
      width: 100px;
      height: 25px;
      background-color: orangered;
      border: 1px solid orangered;
      color: white;
      font-size: 12px;
    }
    a:hover {
      color: orangered;
    }
  }
}
.goods_detail {
  img {
    width: 100%;
    margin: 0 auto;
  }
}
.is_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>